CSS Fonts
In this tutorial you will learn how to style fonts on a web page using CSS.
The font properties can be used for styling the font of the text, font size and boldness, managing variant, and so on.
Font-family
Font-family sets the face of the font. Its value can be a specific font name such as Arial, Verdana, Tahoma, Trebuchet MS, Times New Roman , Georgia, Garamond, Courier New or Brush Script MT; or a generic family name such as sans-serif, serif or monospace.
The value for this property is a prioritized list of one or more font names. If a browser does not have access to the first font, it uses the next font and so on.
Example: Try It
body{
font-family: "Times New Roman", times, serif;
}
h1{
font-family: 'Brush Script MT', cursive;
}
Font-size
Font-size sets the size of the font. The value can be any unit of measure or a percentage of the parent’s font size.
Example: Try It
h1{
font-size: 34px;
}
Font-style
The font-style property is used to set the font face style for the text content of an element. The font style can be normal, italic or oblique. The default value is normal.
Example: Try It
p{
font-style: italic;
}
Font Variant
The font-variant property allows the text to be displayed in a special small-caps variation.
Small-caps or small capital letters are slightly different to normal capital letters, in which lowercase letters appear as smaller versions of the
corresponding uppercase letters.
The font variant can be inherit, normal or small-caps. The default value is normal.
Example: Try It
p{
font-variant: small-caps;
}
Font Weight
font-weight sets the thickness of the font. The bolder and lighter values set the thickness relative to the parent element, and the numeric values specify absolute weights. The value of bold is equal to 700, and normal is the same as 400. Possible values could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
Example: Try It
p{
font-weight: bold;
}
The Font Shorthand Property
There is a convenient shorthand property named font that sets all the font properties in one declaration.
When using the font shorthand property the order of the property values should be.
font: font-style font-variant font-weight font-size fon-family;
Example: Try It
body{
font: italic small-caps bold 15px georgia;
}